import useDateList, {
  useDateListRefs
} from "../components/DatePicker/useDateList";

interface StyleType {
  "--van-overlay-z-index": string | number;
  "--van-overlay-background": string;
}
const useOverlay = defineStore(
  "app-overlay",
  () => {
    const show = ref(false);
    const refreshOverlay = ref(0);
    const style = reactive<StyleType>({
      "--van-overlay-z-index": 1,
      "--van-overlay-background": "rgba(0, 0, 0, 0.7)"
    });
    const { fetchDateList1 } = useDateList();
    const { dateList } = useDateListRefs();
    function toggleShow() {
      show.value = !show.value;
      refreshOverlay.value++;
      show.value && !unref(dateList).length && fetchDateList1();
    }
    function toggleShowRecord(showRecord: boolean) {
      if (showRecord) {
        style["--van-overlay-background"] = "transparent";
      } else {
        style["--van-overlay-background"] = "rgba(0, 0, 0, 0.7)";
        // stopRecording(); // 如果需要在这里调用 stopRecording，可以传入相应的函数
      }
    }

    function toggleShowWinRes(showWinRes: boolean) {
      if (showWinRes) {
        style["--van-overlay-background"] = "transparent";
      } else {
        style["--van-overlay-background"] = "rgba(0, 0, 0, 0.7)";
      }
    }

    return {
      show,
      style,
      toggleShow,
      toggleShowRecord,
      toggleShowWinRes,
      refreshOverlay
    };
  },
  {
    /*persist: {
      key: "overlay",
      storage: LocalStorage,
      pick: ["show"],
      omit: ["refreshOverlay"]
    }*/
  }
);

export const useOverlayRefs = () => {
  const overlayStore = useOverlay();
  return storeToRefs(overlayStore);
};
export default useOverlay;
